<template>
  <div class="warp">
    <div class="warp-content">
      <div class="card">
        <div class="card-top">
          <div class="card-top-title flex flexBetween flexC">
            <div class="card-top-title-text">
              <div class="flex flexC">
                <div>
                  <span>跟团号:</span
                  ><span class="cF55726 p-l-10">{{ data.follow_number }}</span>
                </div>
              </div>
              <div class="card-date flex">
                <div>{{ data.create_time }}</div>
              </div>
            </div>
            <div class="status">{{ getStatus(data) }}</div>
          </div>
          <nut-divider style="color: #eeeeee" />
          <div class="card-info">
            <div class="card-info-top flex flexBetween">
              <div class="flex flexC f1" style="width: 100%">
                <nut-image
                  style="width: 40px; height: 40px"
                  radius="50"
                  class="nutImg"
                  showError
                  :src="data.organizer_avatar"
                >
                  <template #error>
                    <nut-image
                      style="width: 40px; height: 40px"
                      radius="50"
                      class="nutImg"
                      showError
                      src="https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/avatar.png"
                    />
                  </template>
                </nut-image>
                <div class="name">{{ data.organizer_nickname }}</div>
              </div>
              <div class="flex flexC">
                <div class="txt ellipsis w140" style="text-align: right">
                  {{ data.title }}
                </div>
                <nut-icon name="rect-right" style="color: #999"></nut-icon>
              </div>
            </div>
            <div
              class="content flex flexBetween flexC"
              v-if="data.goods_list && data.goods_list.length > 0"
              v-for="(item, inx) in data.goods_list"
              :key="inx"
            >
              <div class="flex flexC">
                <nut-image
                  radius="10"
                  class="nutImg"
                  showError
                  :src="data.url + item.image"
                >
                  <template #error>
                    <nut-image
                      radius="10"
                      class="nutImg"
                      showError
                      src="https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/error.png"
                    />
                  </template>
                </nut-image>

                <div class="info">
                  <div class="info-title ellipsis">{{ item.goods_name }}</div>
                  <div class="info-tips">规格：{{ item.spec }}</div>
                </div>
              </div>
              <div class="money">
                <div class="money-box">
                  <span class="m-icon">¥</span><span>{{ item.money }}</span>
                </div>
                <div class="info-num">共{{ item.quantity }}件</div>
              </div>
            </div>
          </div>
          <slot></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, onBeforeMount, computed, ref } from "vue";
const props = defineProps(["item"]);
const data = computed(() => {
  return props.item || {};
});
const getStatus = (n: {
  status: string | number;
  status_type: number | string;
}) => {
  if (n.status == 1) {
    if (n.status_type == 0) {
      return "待发货";
    }
    if (n.status_type == 1) {
      return "已发货";
    }
    if (n.status_type == 2) {
      return "已提货";
    }
    if (n.status_type == 3) {
      return "已收货";
    }
    if (n.status_type == 4) {
      return "待提货 ";
    }

    return "已付款";
  }
  if (n.status == 0) {
    return "待支付";
  }
  if (n.status == 1) {
    return "已取消";
  }
  if (n.status == 90) {
    return "待退款";
  }

  if (n.status == 98) {
    return "已取消";
  }
  if (n.status == 99) {
    return "已退款";
  }
  if (n.status == 100) {
    return "拒绝退款";
  }
  status: 100;
  status_type: 0;
};
</script>
<style scoped lang="scss">
.warp {
  height: 100%;

  .warp-content {
    .title {
      font-size: 28px;
      color: #000000;
      padding-bottom: 23px;
    }
  }
}

.card {
  background: #fff;
  width: auto;
  margin-bottom: 20px;
  border-radius: 20px;
  padding: 25px 20px;
  .chose {
    width: 36px;
    height: 36px;
    margin-right: 18px;
  }
  .card-top-title-text {
    font-weight: 500;
    font-size: 32px;
  }

  .cF55726 {
    color: #f55726;
  }

  .p-l-10 {
    padding-left: 10px;
  }

  .status {
    color: #26acf5;
    font-size: 28px;
  }

  .card-date {
    color: #999;
    font-size: 22px;
  }
  .card-info {
    .name {
      font-size: 28px;
      color: #000;
      font-weight: 500;
      padding-left: 10px;
    }
    .txt {
      font-size: 28px;
      color: #000;
    }
    .w140 {
      width: 226px;
    }
    .content {
      padding-top: 18px;
      .img-item-title {
        color: #000000;
        font-size: 26px;
        text-align: center;
      }
      .img-item-num {
        color: #999999;
        font-size: 24px;
        text-align: center;
      }
    }
    .info {
      width: 332px;
      font-size: 28px;
      padding-left: 20px;
      .info-title {
        font-weight: 500;
        color: #000000;
      }
      .info-tips {
        font-size: 24px;
        font-weight: 400;
        color: #999999;
      }
    }
    .nutImg {
      display: block;
      width: 120px;
      height: 120px;
      border-radius: 20px;
    }

    .info-num {
      font-size: 22px;
      font-weight: 400;
      color: #999999;
      text-align: right;
    }
    .t-a-c {
      text-align: center;
    }
    .money {
      font-size: 28px;
      color: #000;
      font-weight: bold;
      text-align: center;
      .m-icon {
        font-size: 20px;
        padding-right: 10px;
      }
    }
    .img-item {
      margin-right: 20px;
    }
  }
  .card-address {
    margin: 20px 0;
    background: #f7f8f9;
    padding: 20px 20px;
    .item-txt {
      color: #000000;
      font-size: 26px;
      font-weight: bold;
      padding-bottom: 5px;
    }
    .item-info {
      font-size: 24px;
      padding: 5px 0;
    }
    .p-l-10 {
      padding-left: 10px;
    }
    .p-r-10 {
      padding-right: 10px;
    }
    .item-txt-icon {
      display: block;
      width: 24px;
      height: 24px;
    }
    .item-txt-icon-p {
      display: block;
      width: 24px;
      height: 28px;
    }
    .edit {
      font-size: 24px;
      color: #999;
      padding: 20px 0;
    }
  }
}
</style>
